<template lang="html">
  <div class="goods-info">
    <el-dialog :title="title+ '商品'" v-model="visible" size="tiny" :close-on-click-modal="false">
      <el-form :model="form" ref="form" :rules="rules" label-width="80px">
        <el-form-item label="商品型号" prop="goodstype">
          <el-input v-model.number="form.goodstype"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            :action="upload"
            name="img"
            :data="data"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品介绍" prop="goodstitle">
          <el-input v-model="form.goodstitle"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="money">
          <el-input-number v-model="form.money"></el-input-number>
        </el-form-item>
<!--         <el-form-item label="数量" prop="goodsnumber">
          <el-input-number v-model="form.goodsnumber"></el-input-number>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="confirmBtn()">确定</el-button>
          <el-button @click="cancelBtn()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as goods from '../../../api/goods.js'
import {
  get_filter_params,
  reset_filter_params,
  // get_api_branch_http_host,
  form_init
} from '../../../helpers.js'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object
    }
  },
  data() {
    return {
      visible: false,
      laber: '无',
      dialogVisible: false,
      imageUrl: '',
      upload: '',
      form: {
        id: null,
        file_id: null,
        goodstype: '',
        image: '',
        goodstitle: '',
        money: null,
        goodsnumber: null
      },
      data:{
        filed_type: 'branch',
      },
      rules: {
        name: [{
          required: true,
          message: '请输入名称'
        }],
      }
    };
  },
  methods: {
    confirmBtn() {
      if (this.info) {
        goods.update(this.form.id, this.form).then(data => {
          this.$message.success('编辑成功');
          this.$emit('submit', this.form);
        })
        this.visible = false;
      } else {
        goods.store(this.form).then(data => {
          this.$message.success('新增成功');
          this.$emit('submit', this.form);
        })
        this.visible = false;
      }
    },
    cancelBtn() {
      this.visible = false;
      this.$message.info('操作取消');
    },
     handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.file_id = res[0];
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      if (!(isJPG||isPNG||isGIF)) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!');
      }
      return isJPG||isPNG||isGIF;
    },
  },
  created() {
    this.upload = get_api_branch_http_host() + '/upload';
  },
  computed: {
    title: function() {
      return this.info ? "编辑" : "新增";
    }
  },
  watch: {
    value(val) {
      this.visible = val;
    },
    visible(val) {
      this.$emit('input', val);
    },
    info(info) {
      form_init(info, this.form);
    }
  },
};
</script>
<style lang="css">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
